<template>
    <div class="login-container">
        <div class="login-card">
            <div class="back-icon" @click="$router.back()">
                < 返回 </div>
                    <div class="login-title">GAME注册</div>
                    <el-divider></el-divider>
                    <el-form size="large" :model="state.form" ref="formRef" :rules="rules" label-width="auto">
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="state.form.username" placeholder="请输入用户名"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="state.form.password" type="password" placeholder="请输入密码"></el-input>
                        </el-form-item>
                        <el-form-item label="昵称" prop="nickname">
                            <el-input v-model="state.form.nickname" placeholder="请输入昵称"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="state.form.email" placeholder="请输入邮箱"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model="state.form.phone" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-button size="large" class="full-width" color="#1890ff" @click="submitForm">注册</el-button>
            </div>
        </div>
</template>
<script setup lang='ts'>
import { UserApi } from '@/api/user';
import { ElMessage, type ElForm } from 'element-plus';
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const formRef = ref<InstanceType<typeof ElForm>>();

const state = reactive({
    form: {
        username: '',
        password: '',
        nickname: '',
        email: '',
        phone: ''
    }
});
const rules = reactive({
    username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
});

const submitForm = async () => {
    try {
        if (formRef.value) {
            await formRef.value.validate();
            UserApi.register(state.form).then((res) => {
                if (res.code === 200) {
                    ElMessage.success('注册成功');
                    setTimeout(() => {
                        router.push('/login');
                    }, 1000);
                } else {
                    ElMessage.error(res.msg);
                }
            });
        }
    } catch (error) {
        ElMessage.error('注册失败，请稍后重试');
    }
};
</script>
<style scoped lang='scss'>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 24px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,
            #98FF98 0%,
            #FFB6C1 20%,
            #87CEEB 40%,
            #FFFACD 60%,
            #D8BFD8 80%,
            #98FF98 100%);
    background-size: 400% 400%;
    animation: gradientFlow 15s ease infinite;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(2px);
        z-index: 0;
    }
}

@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 100% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    75% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.login-card {
    width: 400px;
    padding: 48px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    text-align: center;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);

    &:hover {
        transform: translateY(-3px);
        box-shadow:
            0 8px 25px rgba(0, 0, 0, 0.12);
    }

    .back-icon {
        color: #1890ff;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        cursor: pointer;
    }

    .login-title {
        color: #1890ff;
        font-size: 24px;
        font-weight: 500;
        margin-bottom: 32px;
        letter-spacing: 0.5px;
    }
}

@media (max-width: 576px) {
    .login-card {
        width: 100%;
        padding: 24px;
    }
}
</style>
